<template>
  <view class="zhuce-one">
    <view class="up">
      <view class="avatar"><image :src="avatar" alt="" class="icon_img" mode="aspectFill" /></view>
      <view class="info">
        <h4 style="color: rgb(255,182,18);">{{ nickName }}</h4>
        <view style="color: #fff;" @click="goMyInfo">查看个人资料</view>
      </view>
    </view>
  </view>
  <view class="zhuce-two">
    <view class="title">
      <h3 style="color: rgb(255,182,18);">任务记录</h3>
      <span style="color: gainsboro;" @click="goOrder(0)" >全部订单></span>
    </view>
    <view class="order">
      <view class="order-otem" @click="goOrder(2)">
        <view ><image src="../../static/image/mine-img/维修工具白.png" alt="" class="icon_img" mode="aspectFill" /></view>
        <view style="color: white;">进行中</view>
      </view>
      <view class="order-otem" @click="goOrder(3)">
        <view><image src="../../static/image/mine-img/已完成白.png" alt="" class="icon_img" mode="aspectFill" /></view>
        <view style="color: white;">已完成</view>
      </view>
    </view>
  </view>
  <view class="zhuce-three">
    <view class="title">
      <h3 style="color: rgb(255,182,18);">
        <view style="display: flex; align-items: center;color: #fff; background-color: #4f4f4f;" @click="goSet">
          <image src="../../static/image/mine-img/设置白.png" alt="" class="icon_img" mode="aspectFill" style="width: 30px; height: 30px;" />
          <text>设置</text>
        </view>
      </h3>
    </view>
  </view>
</template>

<script>
import { getUserInfoAPI } from '@/api/user.js';
import config from '@/config.js';
export default {
  data() {
    return {
      userInfo: {}
      // nickName: '',
      // avatar: ''
    };
  },
  props: {
    avatar: {
      type: String
    },
    nickName: {
      type: String
    }
  },
  methods: {
    init() {
      console.log('::::::::::::::', this.username);
      console.log('::::::::::::::', this.avatarimg);
      this.getUserInfo();
    },
    goMyInfo() {
      uni.navigateTo({
        url: '/pages/userInfo/repair-userInfo'
      });
    },
    async getUserInfo() {
      console.log('::::::::::::::');
      const { data } = await getUserInfoAPI();
      console.log('><<<<<<<<<<<<<<<<<-----', data);
      this.userInfo = data.data;
      // console.log(this.userInfo);
      // this.nickName = this.userInfo.username;
      // this.avatar = `${config.baseURL}/img/${this.userInfo.user.avatar}`;
      // console.log('>>', this.avatar);
    },
    updateUserInfo() {
      console.log('修改个人信息');
      uni.navigateTo({
        url: '/pages/userInfo/userInfo'
      });
    },
    goMyEquiment() {
      uni.navigateTo({
        url: '/pages/equipment/equipment'
      });
    },
    goSet() {
      uni.navigateTo({
        url: '/pages/setting/setting'
      });
    },
    goOrder(v) {
      uni.navigateTo({
        url: '/pages/order-list/order-list?index=' + Number(v)
      });
    }
  },
  created() {
    console.log('init');
    this.init();
  }
};
</script>

<style lang="scss">
page {
  background-color: #333333;
}
.co {
  color: rgb(255, 182, 18);
}
.zhuce-one {
  border: 1rpx solid #afafaf;
  border-radius: 20rpx;
  box-sizing: border-box;
  padding: 40rpx;
  padding-bottom: 0;
  width: 600rpx;
  height: 200rpx;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -300%);
  background-color: #4f4f4f;
  //绝对值由小到大==>左右 下上
  .up {
    width: 360rpx;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-bottom: 40rpx;
    .avatar {
      width: 70rpx;
      height: 70rpx;
      border: 1px solid;
      border-radius: 50%;
      // margin-right: 10rpx;
      color: white;
      .icon_img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .info {
      z-index: 999;
      h {
      }
      p {
        &:last-child {
          font-size: 12rpx;
          color: white;
        }
      }
    }
  }
  .dwon {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    div {
      width: 100rpx;
      // height: 100rpx;
      border: 1px solid;
      padding: 10rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
  }
}
.zhuce-two {
  border: 1rpx solid #afafaf;
  border-radius: 20rpx;
  box-sizing: border-box;
  padding: 20rpx;
  width: 600rpx;
  height: 300rpx;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -120%);
  background-color: #4f4f4f;
  //绝对值由小到大==>左右 下上
  .title {
    display: flex;
    justify-content: space-between;
  }
}
.zhuce-three {
  border: 1rpx solid #afafaf;
  border-radius: 20rpx;
  box-sizing: border-box;
  padding: 20rpx;
  width: 600rpx;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 0%);
  //绝对值由小到大==>左右 下上
  background-color: #4f4f4f;
}
.order {
  width: 100%;
  padding-top: 50rpx;
  display: flex;
  .order-otem {
    width: 25%;
    height: 150rpx;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 6rpx;
    margin-right: 6rpx;
    view {
      &:first-child {
        width: 40rpx;
        .icon_img {
          width: 40rpx;
          height: 40rpx;
        }
      }
    }
  }
}
</style>
